<template>
  <div class="home" :class="{ 'dark-mode': isDarkMode }">
    <header :class="{ 'dark-header': isRecommendPage || isDarkMode }">
      <div class="logo">
        <img src="@/assets/img/logo/logo.png" alt="">
      </div>
      <nav>
        <router-link to="/home/Recommend" active-class="active">推荐</router-link>
        <router-link to="/home/DailyReport" active-class="active">日报</router-link>
      </nav>
      <i></i>
    </header>

    <div class="content-wrapper">
      <div class="router-view-container">
        <router-view v-slot="{ Component, route }">
          <transition :name="homeTransitionName">
            <keep-alive>
              <component :is="Component" :key="route.path" />
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useDarkModeStore } from '@/stores/darkMode';

const route = useRoute();
const darkModeStore = useDarkModeStore();

// 判断当前是否是推荐页
const isRecommendPage = computed(() => {
  return route.fullPath.includes('/home/Recommend');
});

// 判断是否开启夜间模式
const isDarkMode = computed(() => darkModeStore.isDarkMode);

// 根据Home子路由顺序决定左右滑动方向
const homeTransitionName = ref('slide-left');
let lastChildOrder = 0;

// 获取子路由的 order
const getChildRouteOrder = (routePath: string): number => {
  if (routePath.includes('/home/Recommend')) {
    return 0;
  }
  if (routePath.includes('/home/DailyReport')) {
    return 1;
  }
  // 默认返回 0
  return 0;
};

watch(
  () => route.fullPath,
  (newPath, oldPath) => {
    // 仅当处于 /home 下时启用该过渡判断
    if (!route.path.startsWith('/home')) return;

    // 获取当前和之前路由的 order
    const currentOrder = getChildRouteOrder(newPath);
    const previousOrder = oldPath ? getChildRouteOrder(oldPath) : lastChildOrder;

    // 如果是首次加载或路由初始化，使用默认的 slide-left
    if (oldPath === undefined || oldPath === '' || !oldPath.startsWith('/home')) {
      homeTransitionName.value = 'slide-left';
      lastChildOrder = currentOrder;
      return;
    }

    homeTransitionName.value = currentOrder >= previousOrder ? 'slide-left' : 'slide-right';
    lastChildOrder = currentOrder;
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
@import '@/assets/reset.css';

.home {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 2px 0 #0000001a;
  padding: 0 5vw;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 100;
  transition: background-color 0.3s ease, color 0.3s ease;

  .logo {
    height: 50%;

    img {
      height: 100%;
    }
  }

  nav {
    display: flex;
    align-items: center;
    gap: 3vw;
    font-size: 12px;

    a {
      padding: 2px 8px;
      box-sizing: border-box;
      border-radius: 4px;
      transition: all 0.3s ease;
      color: #000;

      &.active {
        color: #1989fa;
        font-weight: bold;
      }

      &:hover {
        color: #1989fa;
      }
    }
  }

  // 推荐页样式：黑底白字
  &.dark-header {
    background-color: #000 !important;
    box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.1);

    nav a {
      color: #fff;

      &.active {
        color: #1989fa;
        font-weight: bold;
      }

      &:hover {
        color: #1989fa;
      }
    }
  }
}

// 夜间模式下的 header 样式
.home.dark-mode {
  header {
    background-color: #000 !important;
    box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.1);

    nav a {
      color: #fff;

      &.active {
        color: #1989fa;
        font-weight: bold;
      }

      &:hover {
        color: #1989fa;
      }
    }
  }
}

.content-wrapper {
  flex: 1;
  width: 100%;
  height: calc(100vh - 6vh);
  margin-top: 6vh;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.router-view-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  // transition 包裹的内容需要绝对定位，transform 动画不会影响父容器
  >div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>